<template>
    <page-layout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入礼品名字查询" size="small"/>
            <el-button type="primary" size="small" @click="queryEvt">查询</el-button>
            <el-button type="success" size="small" @click="addGift">新增</el-button>
        </template>

        <el-table :data="tableData"
            style="width: 100%"
            height="100%"
            size="small">
            <el-table-column prop="name" label="礼品名称" width="150" fixed/>
            <el-table-column prop="brand" label="品牌" width="180"></el-table-column>
            <el-table-column prop="price" label="售价" width="120"></el-table-column>
            <el-table-column prop="type" label="类型" width="120">
                <template v-slot="data">
                    <div>
                        {{ data.row.type | typeFilter(medicalType) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="120"></el-table-column>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="180"></el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="{row}">
                    <el-button type="text" @click="editEvt(row)" size="small">编辑</el-button>
                    <el-button type="text" @click="detailEvt(row)" size="small" style="margin-left: 10px;">详情</el-button>
                    <el-popconfirm
                        confirm-button-text='确定'
                        cancel-button-text='取消'
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="deleteEvt(row.id)"
                        :title="`确定要删除【${row.name}】礼品信息吗？删除后不可恢复`">
                        <el-button slot="reference" type="text" size="small" style="margin-left: 10px;">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination :page-sizes="[10, 20, 30, 40]"
            :page-size="query.size"
            :current-page="query.page"
            @size-change="sizeChange"
            @current-change="currentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"/>
        </template>
    </page-layout>
</template>

<script>
import {giftListApi, giftDeleteApi, giftAddApi} from '../../../../apis/giftApi.js'
import {dictListApi} from '../../../../apis/productApi'
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            query: {
                page: 1,
                size: 10,
                name: ''
            },
            changeTimer: null,
            medicalType: []
        }
    },
    async mounted() {
        Promise.all(
            [
                dictListApi('MEDICAL')
            ]
        ).then(d => {
            if(d[0].code === 200) this.medicalType = d[0].data.rows
        })
        this.getList()
    },
    methods: {
        async queryEvt() {
            this.query.page = 1
            this.getList()
        },
        async getList() {
            let result = await giftListApi(this.query)
            if(result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        sizeChange(size) {
            this.query.size = size
            if(this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        currentChange(page) {
            this.query.page = page
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        async deleteEvt(id) {
          let result = await giftDeleteApi(id)
          this.getList()
          if(result.code === 200) {
            this.$notify({ message: '删除成功！', type: 'success' });
          } else {
            this.$notify.error({ message: '删除失败！' });
          }
        },
        addGift() {
            this.$router.push('/product/gift/edit')
            let res = giftAddApi(this.query)
            if(res.code === 200) {
                this.tableData = res.data.rows
                this.total = res.data.count
            }
        },
        editEvt(data) {
            this.$router.push('/product/gift/edit')
            console.log(data.id)
        },
        detailEvt(data) {
            // console.log(data)
            localStorage.setItem('giftFlag', 'true')
            this.$store.commit('common/setGiftList',data)
            this.$router.push('/product/gift/detail')
        }
    }
}
</script>

<style lang="less" scoped>
    
</style>